<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form id="channelInfoForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-md-12 b-r">

              <div class="form-group col-md-6 clearfix">
                <label class="col-md-8 control-label">渠道编号：</label>
                <div class="col-md-12">
                  <input id="bean-code" name="code" v-model="item.code" class="form-control" type="text" placeholder="请输入渠道编号" required="" aria-required="true" aria-describedby="bean-code-error" maxlength="55" aria-invalid="true">
                  <span id="bean-code-error" class="help-block m-b-none" for="bean-code"></span>
                </div>
              </div>

              <div class="form-group col-md-6 clearfix">
                <label class="col-md-8 control-label">渠道名称：</label>
                <div class="col-md-12">
                  <input id="bean-name" name="name" v-model="item.name" class="form-control" type="text" placeholder="请输入渠道名称" required="" aria-required="true" aria-describedby="bean-name-error" maxlength="55" aria-invalid="true">
                  <span id="bean-name-error" class="help-block m-b-none" for="bean-name"></span>
                </div>
              </div>

              <div class="form-group col-md-6 clearfix">
                <label class="col-md-8 control-label">所在灌区：</label>
                <div class="col-md-12">
                  <input id="bean-irrigatedArea" name="irrigatedArea" v-model="item.irrigatedArea" class="form-control" type="text" placeholder="请输入所在灌区" required="" aria-required="true" aria-describedby="bean-irrigatedArea-error" maxlength="128" aria-invalid="true">
                  <span id="bean-irrigatedArea-error" class="help-block m-b-none" for="bean-irrigatedArea"></span>
                </div>
              </div>

              <div class="form-group col-md-6 clearfix">
                <label class="col-md-8 control-label">渠道详情：</label>
                <div class="col-md-12">
                  <input id="bean-details" name="details" v-model="item.details" class="form-control" placeholder="请输入渠道详情" aria-describedby="bean-details-error" maxlength="256" aria-invalid="true">
                  <span id="bean-details-error" class="help-block m-b-none" for="bean-details"></span>
                </div>
              </div>
              <div class="form-group col-md-6 clearfix">
                <label class="col-md-8 control-label">所在位置：</label>
                <div class="col-md-12">
                  <input id="bean-place" name="place" v-model="item.place" class="form-control" placeholder="请输入所在位置" aria-describedby="bean-place-error" maxlength="256" aria-invalid="true">
                  <span id="bean-place-error" class="help-block m-b-none" for="bean-place"></span>
                </div>
              </div>
              <div class="form-group col-md-6 clearfix">
                <label class="col-md-8 control-label">渠道用途：</label>
                <div class="col-md-12">
                  <input id="bean-purpose" name="purpose" v-model="item.purpose" class="form-control" type="text" placeholder="请输入渠道用途" aria-describedby="bean-purpose-error" maxlength="32" aria-invalid="true">
                  <span id="bean-purpose-error" class="help-block m-b-none" for="bean-purpose"></span>
                </div>
              </div>

              <div class="form-group col-md-6 clearfix">
                <label class="col-md-8 control-label">渠道类型：</label>
                <div class="col-md-12">
                  <input id="bean-type" name="type" v-model="item.type" class="form-control" type="text" placeholder="请输入渠道类型" aria-describedby="bean-type-error" aria-invalid="true">
                  <span id="bean-type-error" class="help-block m-b-none" for="bean-type"></span>
                </div>
              </div>

              <div class="form-group col-md-12 clearfix">
                <vue-area areaId="areaIds"
                    areaName="areaNames"
                    :areaIdVal="item.areaIds||staff.dto().areaId"
                    :areaNameVal="item.areaNames||staff.dto().areaName"
                    :areaFixed="item.areaIds||staff.dto().areaId"
                    :selectBy="item.areaIds||staff.dto().areaId"
                    areaRequired="true,true,true,false,false">
                </vue-area>
              </div>

              <div class="form-group col-md-6 clearfix">
                <label class="col-md-8 control-label">备注：</label>
                <div class="col-md-12">
                  <textarea id="bean-memo" name="memo" class="form-control" placeholder="请输入备注" aria-describedby="bean-memo-error" maxlength="255" aria-invalid="true">{{item.memo}}</textarea>
                  <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
                </div>
              </div>
            </div>

            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div style="text-align:center;margin-top:50px;">
                <input class="btn btn-primary btn-save" type="submit" value="保存"/>
                <a class="go-back" @click="lbox.closeMyBoxLayer()" href="javascript:">取消</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'
import vueArea from '@/components/vue-area'

import {apiUtil, axiosContentType, site} from '@/assets/js/boss'

export default {
  components: {
    'vue-area': vueArea
  },
  data() {
    return {
      item: {},
      newFlag: 0,
      uuidToken: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#channelInfoForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.channelInfo.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.channelInfo.info)) {
        that.info();
      }
    });
    if (!that.item.areaIds || that.item.areaIds == null) {
      that.item.areaIds = '51,5110,511025,,'; // 默认选择省市县区域
    }
  },
  methods: {
    info() {
      let that = this;
      axios.get(site.channelInfo.info + sessionStorage.getItem(site.channelInfo.info), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = this;
      if ($('#channelInfoForm').valid()) {
        axios.post(site.channelInfo.save, $('#channelInfoForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
      ;
    }
  }
}
</script>

